<template>
  <!-- 热搜 -->
  <div id="hotSearch">
    <header>
      <van-search shape="round"
                  show-action
                  v-model="seachData"
                  @input="searchInput"
                  :placeholder="placeholder"
                  @cancel="$router.go(-1)" />
    </header>
    <div class="hotSearch"
         v-if="seachData==''">
      <div class="hotSearchList">
        <div class="top">
          <p class="title">热搜榜</p>
          <van-button round
                      icon="play"
                      type="default"
                      size="small">播放</van-button>
        </div>
        <van-divider />
        <ul class="content">
          <li v-for="(item,index) in hotSearchData"
              :key="index">
            <span>{{index+1}} </span>
            <span @click="handleClick(item)"> {{item.searchWord}}</span>
            <van-image v-if="item.iconUrl=='https://p1.music.126.net/2zQ0d1ThZCX5Jtkvks9aOQ==/109951163968000522.png'||item.iconUrl=='http://p4.music.126.net/P4mXkx6VKXLFqVo5ohHxDg==/109951163992439900.jpg'"
                       style="margin: 5px 0 0 5px"
                       width="30"
                       height="12"
                       :src="item.iconUrl" />
            <van-image v-if="item.iconUrl=='https://p1.music.126.net/PtgUJbcvDAY0HKWpmOB2HA==/109951163967988470.png'"
                       style="margin: 5px 0 0 5px"
                       width="12"
                       height="12"
                       :src="item.iconUrl" />
            <van-image v-if="item.iconUrl=='https://p1.music.126.net/szWeddITZIVxpvQ0QywzcQ==/109951163967989323.png'"
                       style="margin: 5px 0 0 5px"
                       width="30"
                       height="12"
                       :src="item.iconUrl" />
          </li>
        </ul>
      </div>
      <br />
      <div class="hot"
           v-if="switchBool"
           @click="handleClickHot">
        点击展开更多热搜
        <van-icon name="arrow-down" />
      </div>
    </div>
    <div class="searchInfo"
         v-if="seachData!=''">
      <van-cell-group>
        <van-cell v-for="(info,index) in searchInfo"
                  :key="index"
                  icon="search"
                  :title="info.keyword"
                  @click="handleSearch(info.keyword)" />
      </van-cell-group>
    </div>
  </div>
</template>

<script>
import { getSearchHotDetail, getSearchSuggest } from '@/api/search'
import { debounce } from '../../../currency'
export default {
  name: 'hotSearch',
  data() {
    return {
      seachData: '',
      placeholder: '',
      hotSearchData: [],
      switchBool: true,
      searchInfo: [],
    }
  },
  methods: {
    handleClick(row) {
      this.handleSearch(row.searchWord)
    },
    handleSearch(row) {
      this.$router.push({
        path: '/searchDtl',
        query: {
          searchText: row,
        },
      })
    },
    searchInput(value) {
      if (value) {
        debounce(() => {
          getSearchSuggest(value).then((res) => {
            this.searchInfo = res.result.allMatch
          })
        }, 500)
      }
    },
    handleClickHot() {
      this.switchBool = false
      this.getHotDataDetali()
    },
    async getHotDataDetali() {
      let random = this.switchBool
        ? Math.floor(Math.random() * 11).toString()
        : Math.floor(Math.random() * 21).toString()
      await getSearchHotDetail().then((res) => {
        this.hotSearchData = this.switchBool ? res.data.slice(0, 10) : res.data
        this.placeholder = this.hotSearchData[random].searchWord
      })
    },
  },
  mounted() {
    this.getHotDataDetali()
  },
}
</script>

<style scoped>
#hotSearch {
  width: 100%;
}
.hotSearchList {
  width: 100%;
}
.hotSearchList .top {
  display: flex;
  width: 92%;
  margin: 0 auto;
}
.hotSearchList .top .title {
  flex: 1;
  font-size: 0.4rem;
  height: 0.853333rem;
  line-height: 0.853333rem;
}
.hotSearchList .top .btn {
  /* display: flex; */
}
.van-divider {
  width: 92%;
  margin: 0.2rem auto;
}
.content {
  margin: 0 auto;
}
.content li {
  display: inline-block;
  margin: 0.1rem 0;
  width: 50%;
  font-size: 0.4rem;
}
.content li span:nth-child(1) {
  display: inline-block;
  width: 20%;
  text-align: center;
}
.hot {
  padding-top: 0.2rem;
  text-align: center;
  font-size: 0.38rem;
}
</style>